<script setup lang="ts">
import { ref } from "vue";

// 声明 props 类型
export interface FormProps {
  formInline?: {
    status: string;
    notes: string;
    rechargeId: number;
    remark2: string;
  };
}

// 声明 props 默认值
// 推荐阅读：https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-props
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    status: undefined,
    notes: "",
    rechargeId: 0,
    posType: undefined,
    section: undefined,
    remark2: undefined
  })
});

// vue 规定所有的 prop 都遵循着单向绑定原则，直接修改 prop 时，Vue 会抛出警告。此处的写法仅仅是为了消除警告。
// 因为对一个 reactive 对象执行 ref，返回 Ref 对象的 value 值仍为传入的 reactive 对象，
// 即 newFormInline === props.formInline 为 true，所以此处代码的实际效果，仍是直接修改 props.formInline。
// 但该写法仅适用于 props.formInline 是一个对象类型的情况，原始类型需抛出事件
// 推荐阅读：https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
const newFormInline = ref(props.formInline);
const list = ref([
  "未收到该笔付款",
  "请上传带有付款时间的付款截图",
  "充值金额错误",
  "其它"
]);

// 1:收钱吧;2:拉卡拉;3:对公账户;4:现金;5:其他;6:;
const posTypes = ref([
  {
    label: "收钱吧",
    value: 1
  },
  {
    label: "拉卡拉",
    value: 2
  },
  {
    label: "对公账户",
    value: 3
  },
  {
    label: "现金",
    value: 4
  },
  {
    label: "其他",
    value: 5
  }
]);

// 1:一部;2:二部;3:三部;4:五部;5:六部;6:八部;7:九部;8:营销中心;9:未知;
const sections = ref([
  {
    label: "一部",
    value: 1
  },
  {
    label: "二部",
    value: 2
  },
  {
    label: "三部",
    value: 3
  },
  {
    label: "五部",
    value: 4
  },
  {
    label: "六部",
    value: 5
  },
  {
    label: "八部",
    value: 6
  },
  {
    label: "九部",
    value: 7
  },
  {
    label: "营销中心",
    value: 8
  },
  {
    label: "未知",
    value: 9
  }
]);
</script>

<template>
  <el-form :model="newFormInline">
    <el-form-item label="状态">
      <el-select
        v-model="newFormInline.status"
        class="w-[220px]!"
        placeholder="请选择处理结果"
      >
        <el-option label="待审核" value="0" />
        <el-option label="成功" value="1" />
        <el-option label="驳回" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="收款方式">
      <el-select
        v-model="newFormInline.posType"
        class="w-[220px]!"
        placeholder="请选择收款方式"
      >
        <el-option
          v-for="(item, index) in posTypes"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="部门">
      <el-select
        v-model="newFormInline.section"
        class="w-[220px]!"
        placeholder="请选择部门"
      >
        <el-option
          v-for="(item, index) in sections"
          :key="index"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="备注">
      <el-select
        v-model="newFormInline.notes"
        class="w-[320px]!"
        placeholder="请选择备注"
      >
        <el-option
          v-for="(item, index) in list"
          :key="index"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="newFormInline.notes == '其它'" label="其它">
      <el-input
        v-model="newFormInline.remark2"
        class="w-[320px]!"
        placeholder="请输入其它备注"
      />
    </el-form-item>
  </el-form>
</template>
